<template>
  <div class="title-container"><h1>山楂树种植监测后台管理中心</h1></div>
</template>

<script setup lang="ts"></script>

<style scoped>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使页面高度充满整个视口 */
  margin: 0; /* 去除默认的外边距 */
  background-color: #f0f2f5; /* 浅灰色背景，增加大气感 */
  font-family: Arial, sans-serif; /* 使用常见的无衬线字体，增加可读性 */
}

.title-container {
  text-align: center; /* 使内容居中 */
}

h1 {
  font-size: 48px; /* 加大字体大小 */
  font-weight: bold; /* 加粗字体 */
  color: #333; /* 深色字体，与背景形成对比 */
  margin: 0; /* 去除默认的上下外边距 */
  padding: 20px 0; /* 适当的内边距，使标题不紧贴背景 */
  border-bottom: 4px solid #007bff; /* 蓝色下边框，增加视觉冲击力 */
  display: inline-block; /* 使下边框仅围绕文字，而非整个div */
}
</style>
